<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
    // getter
    get() {
        
        console.log("get: " + firstName.value + " " + lastName.value)
        return firstName.value + ' ' + lastName.value
    },

    // setter
    set(newValue) {
        // 注意：我们这里使用的是解构赋值语法
        console.log("set: " + firstName.value + " " + lastName.value)
        // [firstName.value, lastName.value] = newValue.split(' ')
        let arr = newValue.split(' ')
        firstName.value = arr[0]
        lastName.value = arr[1]
        console.log(firstName.value + " " + lastName.value)
    }
})

function change(){
    fullName.value = 'Jackson Tse'
}
</script>
<template>
    <p>
        <input type="text" v-model="firstName">
    </p>
    <p>
        <input type="text" v-model="lastName">
    </p>
    <p>
        <input type="text" v-model="fullName">
    </p>
    <p><button @click="change">按钮</button></p>
    <p>
        {{firstName}}
    </p>
    <p>
        {{lastName}}
    </p>
    <p>
        {{fullName}}
    </p>
</template>